<template>
  <div class="pannel-container flex-column">
    <div class="pannel-title flex-between">
      <span class="t-name">用水统计</span>
      <div class="flex-box detail" @click="detailClick">
        <span>详情</span>
        <img src="../../assets/imgs/detail_icon.png" alt="">
      </div>
    </div>
    <time-tab class="mt-10" :active.sync="activeTab"></time-tab>
    <div id="water"></div>
  </div>
</template>
<script>
  import timeTab from '@/components/time-tab'
  import moment from 'moment'



  export default {
    components:{
      timeTab
    },
    props:{
      largeScreenWaterVOS:{
        type:Array,
        default:()=>[]
      },
      largeScreenWaterByYearVOS:{
        type:Array,
        default:()=>[]
      },
    },
    name:'water',
    data(){
      return{
        chart: null,
        activeTab:'year',
        option:{
          backgroundColor: 'transparent',
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              lineStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: 'rgba(0, 255, 233,0)'
                  }, {
                    offset: 0.5,
                    color: 'rgba(255, 255, 255,1)',
                  }, {
                    offset: 1,
                    color: 'rgba(0, 255, 233,0)'
                  }],
                  global: false
                }
              },
            },
          },
          grid: {
            top: 60,
            right: 50,
            bottom: 45,
            left: 90,
          },
          xAxis: {
            type: 'category',
            data: [],
            offset:-2,
            axisLine: {
              show: true,
              lineStyle: {
                type: 'dotted',
                color: 'rgba(119, 169, 185, 0.25)'
              }
            },

            axisLabel: {
              textStyle:{
                color: '#ECF0FF',
                fontSize: 32,
                fontWeight:'bold'
              }

            },
            splitLine: {
              show: false
            },
            boundaryGap: false,

          },

          yAxis: {
            type: 'value',
            min: 0,
            // max: 140,
            splitNumber: 4,
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dotted',
                color: 'rgba(119, 169, 185, 0.25)'
              }
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              fontSize:32,
              margin: 20,
              show: true,
              color:'#ECF0FF',
              fontWeight:'bold'
            },
            axisTick: {
              show: true,
            },
          },
          series: []
        }
      }
    },
    methods:{
      detailClick(){
        this.$emit('detailClick',{
          type:'energy'
        })
      },
      setOption(){
        let xAxis = [],series = [];
        const vos = this.activeTab === 'year'?this.largeScreenWaterByYearVOS:this.largeScreenWaterVOS

        vos.forEach((o,i)=>{

          xAxis.push(moment(o.collectionDate).format(this.activeTab === 'year'?'MM月':'DD日'))
          if(!series.length){
            series = o.deviceInfoVOs.map((d,idx)=>{
              return{
                type:'line',
                showAllSymbol: false,
                name:d.deviceName,
                data:[Number(d.dosage)],
                barWidth: 18,
                gapWidth:5,
                lineStyle: {
                  normal: {
                    color: "#EDF9FF",
                  },
                },
                areaStyle: {
                  normal: {
                    color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: 'rgba(139, 184, 246, 1)'
                    },
                      {
                        offset: 1,
                        color: 'rgba(7, 172, 250, 0)'
                      }
                    ], false),
                    shadowBlur: 0
                  }
                },
                itemStyle : {
                  color: "#6c50f3",
                  borderColor: "#fff",
                  borderWidth: 3,
                  shadowColor: 'rgba(0, 0, 0, .3)',
                  shadowBlur: 0,
                  shadowOffsetY: 2,
                  shadowOffsetX: 2,
                }
              }
            })
          }else {
            o.deviceInfoVOs.forEach((d,i)=>{
              series[i].data.push(Number(d.dosage))
            })

          }
        })
        this.option.xAxis.data = xAxis;
        this.option.series = series;
        this.chart.setOption(this.option, true)
      },
      initChart () {
        this.chart = this.$echarts.init(
          document.getElementById(`water`)
        )
        this.chart.setOption(this.option, true)
      }
    },
    mounted () {
      this.initChart()
    },
    watch:{
      activeTab:{
        handler(newval){
          this.setOption()
        }
      }
    }
  }
</script>
<style scoped lang="scss">
  .pannel-container{
    width: 100%;
    background: url("../../assets/imgs/water_bg.png");
    padding: 23px;
    .pannel-title{
      background: url("../../assets/imgs/water_title.png")no-repeat;
    }
    #water{
      flex: 1;
    }
  }
</style>
